<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh">
<head>
    <base href="${APP_PATH}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>考勤情况</title>
    <link rel="icon" href="public/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <jsp:include page="/commons.jsp"></jsp:include>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <jsp:include page="/menu.jsp"></jsp:include>

        <!--End 左侧导航-->

        <!--头部信息-->
        <jsp:include page="/head.jsp"></jsp:include>

        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">

                                <div class="col-lg-3">
                                <form class="pull-left search-bar"  role="form">
                                    <div class="input-daterange input-group js-datepicker" data-auto-close="false" data-date-format="yyyy/mm/dd">
                                        <input class="form-control" type="text" id="minDate" name="minDate" placeholder="minDate">
                                        <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                        <input class="form-control" type="text" id="maxDate" name="maxDate" placeholder="maxDate">
                                    </div>
                                </form>
                                </div>
                                <div class="col-lg-3">
                                    <select class="form-control" type="text" id="cfstatus" name="cfstatus"  value=""  />
                                    <option value="">请选择状态：</option>
                                    <option value="正常">正常</option>
                                    <option value="迟到">迟到</option>
                                    <option value="请假">请假</option>
                                    </select>
                                </div>
                                <div class="toolbar-btn-action">
                                    <button class="btn btn-success m-r-5" id="search" type="button">查询</button>

                                    <a class="btn btn-primary m-r-5" href="#!" id="sickBtn" data-toggle="modal" data-target="#vacateModal"><i class="mdi mdi-plus"></i> 请假</a>
                                    <a class="btn btn-primary m-r-5" href="#!" id="infoBtn" data-toggle="modal" data-target="#infoModal"><i class="mdi mdi-plus"></i> 请假信息</a>

                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>序号</th>
                                            <th>学生编号</th>
                                            <th>学生姓名</th>
                                            <th>考勤日期</th>
                                            <th>考勤状态</th>
                                        </tr>
                                        </thead>
                                        <tbody id="dataList">
                                        <script id="dataTpl" type="text/javascript">
                                            {{each checkinfos checkinfo}}
                                            <tr>
                                            <td>
                                            <label class="lyear-checkbox checkbox-primary">
                                                <input type="checkbox" name="ids[]" value="{{checkinfo.cfid}}"><span></span>
                                                </label>
                                                </td>
                                                <td>{{$index+1}}</td>
                                                <td>{{checkinfo.student.sno}}</td>
                                            <td>{{checkinfo.student.uname}}</td>

                                            <td>
                                            {{checkinfo.times}}
                                            </td>
                                            <td>
                                            {{if checkinfo.cfstatus == '正常'}} <font class="text-success">{{checkinfo.cfstatus}}</font>    {{/if}}
                                            {{if checkinfo.cfstatus != '正常'}} <font class="text-danger">{{checkinfo.cfstatus}}</font>    {{/if}}
                                            </td>
                                            </tr>
                                            {{/each}}
                                        </script>


                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination" id="pageList">



                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<!-- Start 请假模态框 -->
<div class="modal fade" id="vacateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">请假</h4>
            </div>
            <form id="sickForm">
            <div class="modal-body">
                <input type="hidden" value="" name="pages" id="pages">
                <input type="hidden" value="" name="pageNum" id="pageNum">
                <form class="form-horizontal" action="" method="post" enctype="multipart/form-data" onsubmit="return false;">
                    <input type="hidden" id="studentid" name="studentid" value="" />
                    <div class="form-group">
                        <label class="col-xs-12" for="name">姓名</label>
                        <div class="col-xs-12">
                            <input class="form-control" type="text" id="name" name="name" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12" for="starttime">起始时间</label>
                        <div class="col-xs-12">
                            <input class="form-control js-datepicker m-b-10" type="text" id="starttime" name="starttime" placeholder="yyyy/mm/dd" value="" data-date-format="yyyy/mm/dd" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12" for="endtime">结束时间</label>
                        <div class="col-xs-12">
                            <input class="form-control js-datepicker m-b-10" type="text" id="endtime" name="endtime" placeholder="yyyy/mm/dd" value="" data-date-format="yyyy/mm/dd" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12" for="confirmid">审批人</label>
                        <div class="col-xs-12">
                            <select class="form-control js-datepicker m-b-10" type="text" id="confirmid" name="confirmid"  value=""  /></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12" for="reason">请假理由</label>
                        <div class="col-xs-12">
                            <textarea class="form-control" id="reason" name="reason" rows="6" placeholder="理由.."></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="subBtn" class="btn btn-primary" data-dismiss="modal">提交</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- End 请假模态框 -->

<!-- Start 请假审批模态框 -->
<div class="modal fade bs-example-modal-lg in" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">请假</h4>
            </div>


            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" enctype="multipart/form-data" onsubmit="return false;">
                    <table class="table table-bordered">
                        <thead>
                        <th>序号</th>
                        <th>学号</th>
                        <th>学生姓名</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>状态</th>
                        <th>审批人</th>
                        <th>删除</th>
                        </thead>

                        <tbody id="sickformInfo">
                        <script id="sickTpl" type="text/javascript">
                            {{each sickforms sickform}}
                            <tr>

                            <td>{{$index+1}}</td>
                            <td>{{sickform.student.sno}}</td>
                            <td>{{sickform.student.uname}}</td>

                            <td>
                            {{sickform.starttime}}
                            </td>
                            <td>
                            {{sickform.endtime}}
                            </td>
                            <td>
                            {{sickform.status}}
                            </td>

                            <td>{{sickform.confirmer.uname}}</td>
                            <td>
                                <button class="delBtn btn btn-danger btn-sm" type="button" data-sid="{{sickform.sid}}">删除</button>
                                </td>



                            </tr>
                            {{/each}}
                        </script>

                    </table>

            </div>
            <div class="modal-footer">
                <button type="button" id="closeBtn" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
<!-- End 请假模态框 -->


<!--日期选择插件-->
<script src="public/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="public/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">
   $(function(){
       $('.search-bar .dropdown-menu a').click(function() {
           var field = $(this).data('field') || '';
           $('#search-field').val(field);
           $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
       });

       <!-- 点击closeBtn刷新页面 -->
       $("#closeBtn").click(function () {
           location.reload();
       });
       //展示学员历史请假信息,可以进行删除
       $("#infoBtn").click(function(){
           showSickInfo()
       });//展示学员历史请假信息，可以进行删除

       //点击按钮delBtn按钮删除请假信息
       $(document).on("click",".delBtn",function (event) {
            let sid = $(this).attr("data-sid");
           layer.confirm("确认删除？",  {icon: 3, title:'提示'}, function(cindex){
               layer.close(cindex);
               $.ajax({
                   url:"sickform/delete",
                   data:{"sid":sid},
                   type:"post",
                   dataType:"json",
                   success:function (result) {
                       if(result.result){
                           layer.msg("删除成功", {time:1000, icon:6, shift:6}, function () {
                               showSickInfo();
                           });
                       }else{
                           layer.msg("删除失败", {time:1000, icon:5, shift:6}, function () {});
                       }
                   }//success
               })//ajax
           });//layer
       })

        //进入页面之后加载考勤信息
       layer.msg("加载中", {time:500, icon:16, shift:5}, function(){
           goPage("1","");
       });//layer

       //点击显示请假信息模态框，并将其内容进行初始化
       $("#sickBtn").click(function () {
           $.ajax({
                url:"sickform/init",
                data:{"uid":"${loginUser.uid}"},
                dataType: "json",
                type:"post",
                success:function(result){
                    if(result.result){
                        layer.msg("加载中", {time:500, icon:16, shift:5}, function(){
                            $("#confirmid").empty();
                            var confirmidHtml = "";
                            $.each(result.userList,function(index,obj){
                                confirmidHtml += "<option value='"+obj.uid+"'>"+obj.uname+"</option>";
                            })//each
                            $("#confirmid").html(confirmidHtml);
                            $("#studentid").val(result.user.uid);
                            $("#name").val(result.user.uname);
                        });//layer
                    }else{
                        layer.msg("加载失败", {time:1000, icon:5, shift:6}, function () {});
                    }
                }//success
            })//ajax
       });//点击显示请假信息模态框，并将其内容进行初始化


       //多条件分页查询
       var examplesMap = "";
       $("#search").click(function () {
            var minDate = $("#minDate").val();
            var maxDate = $("#maxDate").val();
            var cfstatus = $("#cfstatus").val();
            examplesMap = {"minDate":minDate,"maxDate":maxDate,"cfstatus":cfstatus};

            examplesMap = JSON.stringify(examplesMap);
            goPage("1",examplesMap);
       });//多条件分页查询
       //点击page跳转页面
       $(document).on("click",".page" , function (event) {
            let page = $(this).attr("data-page");

           goPage(page,examplesMap);
       })//点击page跳转页面
   });//入口

   //提交请假信息，在数据库中生成相关信息
   $("#subBtn").click(function () {

       $.ajax({
            url:"sickform/add",
            data:$("#sickForm").serialize(),
            dataType:"json",
            type:"post",
            success:function (result) {
                if(result.result){
                    layer.msg("提交成功", {time:1000, icon:6, shift:6}, function () {
                        location.href ="attendance/studentIndex";
                    });
                }else{
                    layer.msg("提交失败", {time:1000, icon:5, shift:6}, function () {});
                }
            }//success
        })//ajax

   });//提交请假信息，在数据库中生成相关信息

   function showSickInfo() {
       $.ajax({
           url:"sickform/myselfInfo",
           data:{"studentid":"${loginUser.uid}"},
           type:"post",
           dataType:"json",
           success:function (result) {
               if(result.result){
                   layer.msg("加载中", {time:500, icon:16, shift:5}, function(){
                       let sickformInfoHtml = template("sickTpl", {
                           sickforms : result.sickforms
                       });

                       $("#sickformInfo").html(sickformInfoHtml);

                   });//layer
               }else{
                   layer.msg("加载失败", {time:1000, icon:5, shift:6}, function () {});
               }
           }//success
       })//ajax
   }


    function goPage(pageNum,examplesMap){
        $.ajax({
            url:"attendance/listSelf",
            data:{"uid":"${loginUser.uid}","pageNum":pageNum,"examplesMap":examplesMap},
            dataType:"json",
            type:"post",
            success:function (result) {
                if(result.result){
                    var pageNumVal = $("#pageNum").val(result.pageInfo.pageNum);
                    let dataHtml = template("dataTpl", {
                        checkinfos : result.checkinfos
                    });

                    $("#dataList").html(dataHtml);

                    console.log(result.pageInfo);
                    //对pageInfo判空，若为null直接退出
                    if(result.pageInfo == null){
                        layer.msg("无数据", {time:1000, icon:5, shift:6}, function () {});
                        return;
                    }

                    $("#pageList").empty();
                    var pageListHtml = "共有数据"+(result.pageInfo.total)+"条，当前页为第"+result.pageInfo.pageNum+"页，展示数据"+result.pageInfo.size+"条";
                    if(result.pageInfo.pageNum == 1){
                        pageListHtml += "<li class='disabled'><span><a class='page'>«</a></span></li>";
                    }else{
                        pageListHtml += "<li class=''><span><a class='page' href='javascript:void(0)' data-page="+result.pageInfo.prePage+">«</a></span></li>";
                    }
                    for (var i = 1 ; i <= result.pageInfo.pages ; i++){
                        var aObj2 = "";
                        if(result.pageInfo.pageNum == i){
                            aObj2 = "<li class='active' ><a class='page' href= 'javascript:void(0)' data-page="+i+">"+i+"</a></li>";
                        }else{
                            aObj2 = "<li ><a class='page' href= 'javascript:void(0)' data-page="+i+">"+i+"</a></li>";
                        }

                        pageListHtml += aObj2;
                    }
                    if(result.pageInfo.pageNum == result.pageInfo.pages){
                        pageListHtml += "<li class='disabled'><span><a class='page' >»</a></span></li>";
                    }else{
                        pageListHtml += "<li class=''><span><a class='page' href='javascript:void(0)' data-page="+result.pageInfo.nextPage+">»</a></span></li>";
                    }


                    $("#pageList").html(pageListHtml);

                }
            }//success
        });//ajax
    }
    

</script>
</body>
</html>
